<template>
  <div id="previewApp">
    <div class="trhead">
      <div class="tdhead">变量名称</div>
      <div class="tdhead">
        可阅
      </div>
      <div class="tdhead">
        可写
      </div>
      <div class="tdhead">
        必填
      </div>
      <div class="clearfloat"></div>
    </div>
    <div class="tr" v-for="item in datalist" :key="item.name">
      <div class="td">{{ item.name }}</div>
      <div class="td">{{ item.name }}</div>
      <div class="td">{{ item.name }}</div>
      <div class="td">{{ item.name }}</div>
      <template class="tr" v-for="childitem in item.child">
        <childtr :childitem="childitem" :key="childitem.name"></childtr>
      </template>
      <div class="clearfloat"></div>
    </div>
    <el-input
      placeholder="请输入${ title}内容"
      v-model="input"
      :disabled="true"
    ></el-input>
  </div>
</template>
<script>
const childtr = {
  name: 'childcontrl',
  props: ['childitem'],
  template: ` <div class="tr" >
        <div class="td">{{ childitem.name }}</div>
        <div class="td">{{ childitem.name }}</div>
        <div class="td">{{ childitem.name }}</div>
        <div class="td">{{ childitem.name }}</div>
        <div class="clearfloat"></div>
         <template class="tr" v-for="childitem1 in childitem.child">
          <childcontrl :childitem="childitem1" :key="childitem1.name"></childcontrl>
         </template>
      </div>`
}
export default {
  props: [],
  data() {
    return {
      input: 'fdsf',
      datalist: [
        {
          name: '1',
          aa: '1',
          bb: '',
          cc: '',
          child: [
            {
              name: '2',
              aa: '1',
              bb: '',
              cc: '',
              child: [
                {
                  name: '3',
                  aa: '1',
                  bb: '',
                  cc: '',
                  child: [
                    { name: '4', aa: '1', bb: '', cc: '', child: [] },
                    { name: '5', aa: '1', bb: '', cc: '', child: [] }
                  ]
                },
                { name: '6', aa: '1', bb: '', cc: '', child: [] }
              ]
            },
            { name: '7', aa: '1', bb: '', cc: '', child: [] },
            { name: '8', aa: '1', bb: '', cc: '', child: [] }
          ]
        }
      ]
    }
  },
  components: {
    childtr
  },
  methods: {
    checkReadAll() {},
    checkRequiredAll() {},
    checkWriteAll() {}
  }
}
</script>
<style>
.trhead {
  width: 100%;
  float: left;
}
.tdhead {
  border: 1px solid #ccc;
  border-left: none;
  border-top: none;
  text-align: center;
  min-width: 25%;
  height: 33px;
  width: auto;
  white-space: nowrap;
  padding-top: 5px;
  text-align: center;
  float: left;
  background-color: #f5f5f5;
}
.tr {
  width: 100%;
  float: left;
}
.td {
  border: 1px solid #ccc;
  border-left: none;
  border-top: none;
  text-align: center;
  min-width: 25%;
  height: 33px;
  padding-top: 5px;
  text-align: center;
  width: auto;
  white-space: nowrap;
  float: left;
}
.clearfloat {
  clear: both;
  height: 0;
  font-size: 1px;
  line-height: 0px;
}
</style>
